<template>
    <div class="container">
        <HeadCopm></HeadCopm>
        <div class="box1">
            <div class="left">
                <h2>猎户臂</h2>
                <p>从我们所在的银河系来看，气体和尘埃云便近猎户座而被称为猎户臂的一片区文字区文字区文字区文字区文字区文字区)宁区文宇区文字区文字区文字区文字区文宇字区文字区文字区文字区文字区文字区文字区文字区。文字区文字区文字区文字区文字区文字区)宁区文宇区文字区文字区文字区文字区文宇区文字区文字区文字区文字区
                </p>
            </div>
            <div class="right">
                <el-image :src="require('../assets/detail1-img-1.jpg')"
                    :preview-src-list="[require('../assets/detail1-img-1.jpg')]">
                </el-image>
            </div>
        </div>
        <div class="box2">
            <div class="left">
                <h1>在太空中盘旋</h1>
            </div>
            <div class="right">
                <p>
                    猎户臂在银河系中的位置相对较为特殊，但并不是银河系中唯一的旋臂。
                    在太空中盘旋
                    字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区
                    文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文字区文
                    区文字区
                </p>
            </div>
        </div>
        <div class="box3">
            <el-image class="img" :src="require('../assets/detail1-img-2.jpg')"
                :preview-src-list="[require('../assets/detail1-img-2.jpg')]"></el-image>
            <el-image class="img" :src="require('../assets/detail1-img-3.jpg')"
                :preview-src-list="[require('../assets/detail1-img-3.jpg')]"></el-image>
        </div>
        <div class="box4">
            <h1>与其他旋臂区别</h1>
            <p>
                文字区文字区文字区文字区文字区文字区文字区文字区文文字区文字区文字区文字区文字区文字区文字区文区文字区文字区文字区文字区文字区文字区文字区文字
                区文字区文字区文字区文字区文字区文文字区文字区文字区文字区文字区文字区文字区文字区寸
            </p>
        </div>
        <div class="box5">
            <div class="box">
                <el-image class="img" :src="require('../assets/detail1-img-4.jpg')"
                    :preview-src-list="[require('../assets/detail1-img-4.jpg')]"></el-image>
                <h4>猎户星云(M42)</h4>
                <p>
                    猎户星云(M24)，也被称作猎户座大星云，是一个位于猎户座的弥漫星云，是一个非常“年轻”的天体
                </p>
            </div>
            <div class="box">
                <el-image class="img" :src="require('../assets/detail1-img-5.jpg')"
                    :preview-src-list="[require('../assets/detail1-img-5.jpg')]"></el-image>
                <h4>火焰星云(NGC2024)</h4>
                <p>
                    火焰星云(NGC2024)，是猎户座分子云复合体的一部分，是一个发散星云在宇宙中极为明亮
                </p>
                
            </div>
        </div>
        <div class="box6">
            <h2>猎户臂中存在的星云</h2>
        </div>
        <div class="box7">
            <div class="left" @click="toSun">
                <img src="../assets/detail1-img-6.jpg" class="img">
            </div>
            <div class="right">
                <h3>猎户臂中的太阳与太阳系</h3>
            </div>
        </div>
        <Footer :text="text"></Footer>
    </div>
</template>
<script>
import HeadCopm from "@/components/HeadComp.vue"
import Footer from "@/components/Fotter.vue"
export default {
    name: "Detail1",
    components: {
        HeadCopm,
        Footer
    },
    data() {
        return {
            text: {
                chinese: "你我皆为星辰之子，每一个细胞都书写者整个宇宙的历史，当你凝视白己，也望见了宇宙的轮廓。",
                english: "We are all stardust, with every cell in our bodies echoing the history of the cosmos. As you gaze into yourself, you are also tracing the contours of the universe."
            }
        }
    },
    methods: {
        toSun() {
            this.$router.push({
                path: '/detail2'
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    .box1 {
        padding: 62px 15vw;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;

        .left {
            padding: 30px 70px 30px 30px;
            width: 400px;
            height: 500px;
            background-color: #D7D7D7;
            box-sizing: border-box;

            h2 {
                margin-bottom: 30px;
            }

            p {
                font-size: 14px;
                text-align: left
            }
        }

        .right {
            transform: translateX(-50px);
            width: 700px;
            height: 450px;
            display: flex;
            align-items: center;
            .el-image {
                width: 700px;
                height: 400px;
            }
        }
    }

    .box2 {
        padding: 40px 20vw 60px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .left {
            width: 300px;
            text-align: center;
        }

        .right {
            width: 550px;

            p {
                text-align: left;
            }
        }
    }

    .box3 {
        padding: 20px 20vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .img {
            width: 400px;
            height: 300px;
        }
    }

    .box4 {
        padding: 60px 20vw 40px;
        width: 100%;
        box-sizing: border-box;
        text-align: left;

        h1 {
            width: 300px;
        }

        p {
            padding: 10px 0 0 60px;
        }
    }

    .box5 {
        padding: 0px 20vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;

        .box {
            width: 400px;
            .img {
                width: 400px;
                height: 300px;
            }
            h4 {
                margin: 5px 0;
            }
            p {
                margin: auto;
                width: 70%;
                font-size: 13px;
            }
        }
    }
    .box7 {
        margin-top: 90px;
        padding: 0 23vw 20px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        .left {
            cursor: pointer;
            .img {
                width: 240px;
                height: 240px;
            };
        }
        .right {
            height: 240px;
            h3{
                line-height: 240px;
            }
        }
    }
}
</style>